<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
</script>


<script src="/static/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/annos'
            , toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
            , cols: [[
                {field: 'id', title: '公告id', width: 160, fixed: 'left', unresize: true, sort: true}
                , {field: 'content', title: '公告内容', width: 800, fixed: 'left'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
        });

        // 监听行工具事件
        table.on('tool(test)', function (obj) {
            $ = layui.jquery
            var data = obj.data;
            var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; // 获得当前行 tr 的 DOM 对象（如果有的话）
            var id = data.id;
            var name = data.name;

            if (layEvent === 'edit') {
                layer.open({
                    type: 2,
                    title: "查看公告信息",
                    area: ['800px', '800px'],
                    maxmin: true, // 开启最大化最小化按钮
                    shadeClose: true,
                    content: "annoDetails.jsp?id=" + id,
                    end: function () {
                        $(".layui-laypage-btn").click();
                    }
                });
            }

        });
    });
</script>
</body>
</html>
